<template>
  <div>
    <el-container style="height: 100%;">
      <el-header style="margin: 20px;">
        <h1> 填写日报{{this.MyProjects.createTime}}</h1>
      </el-header>




      <el-main >

        <el-container>
          <!--      左侧布局        -->
          <el-aside style="border-radius: 10px;" width="45%" >
            <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="addRow">新增</el-button>

            <!--  提示信息          -->
            <el-row :gutter="20" style="margin-top: 5px;margin-bottom: 5px;">
              <el-col :span="6" style="margin-left: 5px;"><div class="grid-content bg-purple">项目名称</div></el-col>
              <el-col :span="6" style="margin-left: 110px;"><div class="grid-content bg-purple">项目时长</div></el-col>
            </el-row>


            <!--       动态添加项目       -->
            <div class="grid-content bg-purple">
              <el-form ref="MyProjects"  :model="MyProjects">
                <div v-for="(item,index) in MyProjects.projects" :key="index">
                  <!--          项目名称            -->
                  <el-col :span="9" style="height: 20px;">
                    <el-form-item >
                      <el-select  v-model="item.projectName" placeholder="下拉选择项目名称" >
                        <el-option v-for="(name,index) in projectsName" :key="index" :label="name.project_name" :value="name.project_name"></el-option>

                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!--          项目工时            -->
                  <el-col :span="9">
                    <el-form-item >
                      <el-select  v-model="item.projectTime" placeholder="(0-8小时)" style="margin-left: 40px;" >
                        <el-option label="0小时" value="0"></el-option>
                        <el-option label="1小时" value="1"></el-option>
                        <el-option label="2小时" value="2"></el-option>
                        <el-option label="3小时" value="3"></el-option>
                        <el-option label="4小时" value="4"></el-option>
                        <el-option label="5小时" value="5"></el-option>
                        <el-option label="6小时" value="6"></el-option>
                        <el-option label="7小时" value="7"></el-option>
                        <el-option label="8小时" value="8"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!--          删除按钮            -->
                  <el-col :span="3">
                    <el-form-item >
                      <el-button style="margin-left: 30px;"  @click="deleteRow(index)">删除</el-button>
                    </el-form-item>
                  </el-col>
                </div>
              </el-form>
            </div>

          </el-aside>

          <!--       右侧布局       -->
          <el-main>
            <div >
              <h1 style="margin-bottom: 10px;">工作日志填写</h1>
            </div>
            <el-input  type="textarea" :rows="25" placeholder="请输入内容"  v-model="worklog">
            </el-input>
          </el-main>
        </el-container>

        <!--    新增项目按钮      -->



      </el-main>
      <el-footer>
        <el-button type="primary" style="float: right;" @click="saveWorkingHours">保存并提交</el-button>

      </el-footer>
    </el-container>

  </div>
</template>

<script>
import {
  dailyStatusById, deletelog,
  getalllog, getprojectbylogid,
  getprojectname,
  getuserinfo,
  saveHours,
  saveLog,
} from "@/api/system/daily";
import axios from "axios";

export default {
  name: "writeDaily",

  data() {
    return {
      log_status:[11,12,13],
      DayLog:{
        staff:{
          userId:"",
        },
        projects:[],
        content:"",
        work_time:"",
        approval_status:"",
        image_url:"",
        file_url:"",
        created_at:"",
        updated_at:"",
      },
      MyProjects: {
        projects:[{
          projectName: '',//项目名称
          projectTime: '',//工作时长

        }],
        createTime:"",
        username:"",
      },
      dayLogId:"",
      worklog:"",
      projectsName: [],
      userId:"",
      index:0,
      getDailyInfo:{
        log_type:"1",
        staff:{
          userId:"",
        },
      },
      dayLogResponse:"",
    }
  },
  created() {
    //获取用户id
    this.getUserinfo();

    //获取项目信息
    this.getProjectsName();
    //获取所填写日报对应的日期
    this.getCreateTime();
    this.MyProjects.username=this.$store.state.user.name;//当前用户
  },
  methods: {


    async getDailyStatus() {
      this.loading = true;
      await dailyStatusById(this.getDailyInfo).then(response => {
          this.dayLogResponse=response.rows;
          for(let i=0;i<this.dayLogResponse.length;i++){
            this.dayLogResponse[i].created_at=response.rows[i].created_at.slice(0,10);
          }
          this.loading = false;
          //console.log(this.dayLogResponse);
        }
      );
    },
    //进入页面加载之前填过的数据
    getPreviousInfo(){
      for(let i =0 ;i <this.dayLogResponse.length;i++){


        if(this.dayLogResponse[i].created_at==this.MyProjects.createTime){
          this.dayLogId=this.dayLogResponse[i].id;
          this.worklog=this.dayLogResponse[i].content;
          break;
        }

      }
      //console.log("日报id"+this.dayLogId);
      //之前有信息才会进去找对应的项目信息
      if(this.dayLogId){
        getprojectbylogid(this.dayLogId).then(response => {
          for(let i =0 ;i< response.data.projects.length ; i ++){
            this.MyProjects.projects.push(
              {
                projectName: response.data.projects[i].project_name,
                projectTime: "",
              }


            )
          }
          this.MyProjects.projects.splice(0,1);

        });

      }



    },
    //获得项目表
    async getProjectsName(){
      this.loading=true;
      getprojectname(this.createTime).then(response => {
        //console.log("response---"+JSON.stringify(response.rows));
        this.projectsName=response.rows;
        //console.log("projectsName----"+JSON.stringify(this.projectsName));
        this.loading = false;
      });
    },
    //获取填写日报对应的日期
    getCreateTime(){
      if(this.$route.query.createTime)
        this.MyProjects.createTime=this.$route.query.createTime;
      else
        this.MyProjects.createTime=this.getData();
    },
    //格式化日期
    dateFormat:function(time) {
      let date=time;
      let year=date.getFullYear();
      let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      let day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      // 拼接
      return year+"-"+month+"-"+day;
    },
    //获取日期
    getData:function (){
      let now=new Date();
      return this.dateFormat(now);
    },
    //动态添加项目信息
    addRow() {
      //限制添加行数
      if(this.MyProjects.projects.length==8)
        return;
      this.MyProjects.projects.push(
        {
          projectName: '',
          projectTime: '',
        }
      )
    },
    deleteRow(index){
      for (let i=0; i<this.MyProjects.projects.length; i++){
        if(i==index){
          this.MyProjects.projects.splice(i, 1)
        }
      }

    },
    saveWorkingHours:function (){
      //this.projectsName
      let time=0,flag=1;
      for(let i =0; i<this.MyProjects.projects.length;i++){
        time+=parseInt(this.MyProjects.projects[i].projectTime);
        if(this.MyProjects.projects[i].projectName==""||this.MyProjects.projects[i].projectTime==""){
          flag=0;
        }
      }
      if(time>8){
        alert("工作时长不能大于8小时!!");
        return;
      }
      if(flag==0){
        alert("项目名称或者项目时长不能为空!!");
        return;
      }

      this.DayLog.projects=[];
      this.DayLog.staff.userId=this.userId;
      this.DayLog.work_time=time;
      this.DayLog.approval_status=this.log_status[this.index++];
      this.DayLog.content=this.worklog;
      this.DayLog.created_at=this.MyProjects.createTime+" 00:00:00";
      this.DayLog.updated_at=this.getData();
      for(let i =0; i<this.MyProjects.projects.length;i++){
        for(let j=0 ;j<this.projectsName.length;j++){
          if(this.MyProjects.projects[i].projectName==this.projectsName[j].project_name){
            this.DayLog.projects.push({
              id:this.projectsName[j].id,
            });

          }
        }
      }
      this.loading = true;
      //console.log(this.DayLog);

      try {
        deletelog(this.dayLogId).then(response => {

        });
      }catch{

      }

      saveHours(this.DayLog).then(response => {

        this.$modal.msgSuccess("提交成功");
        this.loading = false;
      });

    },
    async getUserinfo(){
      this.loading=true;
      await getuserinfo().then(response => {
        this.userId=response.user.userId;
        this.getDailyInfo.staff.userId=response.user.userId;
        this.loading = false;
      });
      //获取所有日报信息
      await this.getDailyStatus();
      //获取之前此用户的所有日报信息
      await this.getPreviousInfo();

    },

  },

}
</script>

<style scoped>

</style>
